<template>
  <div class="select-module-box flex flex-jcsb">
    <div class="select-module-select">
      <SelectItems
        ref="SelectItemsRef"
        :select-list="columns"
        :dynamic-select-data="dynamicSelectData"
        @handlerSelectData="handlerSelectData"
      />
    </div>
    <div class="select-module-btn">
      <el-button
        v-if="selectList && selectList.length > 3"
        type="text"
        size="small"
        class="search-isOpen mr-10"
        :icon="collapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
        @click="collapsed = !collapsed"
      >
        {{ collapsed ? '展开' : '收起' }}
      </el-button>
      <template v-for="item in btnList">
        <el-button
          :key="item.id"
          size="small"
          class="btn-item"
          :type="item.type"
          :icon="item.icon || ''"
          @click="clickBtn(item)"
        >
          <span v-if="item.label">{{ item.label }}</span>
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import SelectItems from '@/components/SelectItems'

export default {
  name: 'SelectModule',
  components: {
    SelectItems
  },
  props: {
    // 卡片配置
    selectList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectData: {},
      dynamicSelectData: {},
      btnList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'el-icon-search',
          id: 'btn-search'
        },
        {
          label: '重置',
          icon: 'el-icon-refresh-right',
          id: 'btn-reset'
        }
      ],
      collapsed: true,
      columns: []
    }
  },
  watch: {
    collapsed: {
      handler(val) {
        this.handlerShowCol(val)
      },
      immediate: true
    },
    selectList: {
      handler(val) {
        this.handlerShowCol(this.collapsed)
      },
      immediate: true
    }
  },
  created() {
    this.handlerShowCol(false)
  },
  methods: {
    /**
     * 处理筛选
     * @param {*} obj 数据
     * @param {*} type 类型
     */
    handlerSelectData(obj, type, prop) {
      this.selectData = Object.assign(this.selectData, obj)
      this.$emit('itemChange', this.selectData, prop)
    },
    /**
     * 筛选赋值
     * @param {*} obj 数据
     */
    setSelectData(obj = {}) {
      this.selectData = Object.assign(this.selectData, obj)
      for (const key in this.selectData) {
        if (Object.hasOwnProperty.call(this.selectData, key)) {
          this.dynamicSelectData[key] = this.selectData[key]
        }
      }
      this.$refs.SelectItemsRef.setSelectItemsVal(this.dynamicSelectData)
    },
    /**
     * 重置
     */
    handleReset() {
      this.$refs.SelectItemsRef.handleReset()
    },
    /**
     * 处理筛选
     * @param {*} item 数据
     */
    clickBtn(item) {
      const { label } = item
      // 查询
      if (label === '查询') {
        this.$emit('handlerSelectData', this.selectData)
      }
      // 重置
      if (label === '重置') {
        this.resetForm()
      }
    },
    /**
     * 重置
     */
    resetForm() {
      const selectForm = {}
      for (const key in this.selectData) {
        if (Object.hasOwnProperty.call(this.selectData, key)) {
          selectForm[key] = undefined
        }
      }
      this.selectData = {}
      this.dynamicSelectData = {}
      this.setSelectData()
      this.handleReset()
      this.$emit('resetForm', selectForm)
    },
    /** 处理是否展开折叠 */
    handlerShowCol(val) {
      if (!this.selectList || !this.selectList.length) return
      if (!val) {
        this.columns = this.selectList.map((e) => {
          return {
            ...e,
            isShow: true
          }
        })
      } else {
        this.columns = this.selectList.map((e) => {
          return {
            ...e,
            isShow: false
          }
        })
        // this.columns[0].isShow = true
        this.columns.forEach((e, i) => {
          if (i < 4) {
            e.isShow = true
          }
        })
      }
      this.setSelectData()
    }
  }
}
</script>

<style lang="scss" scoped>
.select-module-box {
  border-bottom: 1px solid #eee;
  max-height: 500px;
  transition: max-height 0.8s ease-in-out;

  .select-module-select {
    display: flex;
    flex-wrap: wrap;
  }

  .select-module-btn {
    display: flex;
    align-items: center;
    height: 48px;
    padding-bottom: 16px;
  }
}
</style>
